<template>
  <div>
    <!--面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图-->
    <el-card>
      <!-- 搜索区 -->
      <form>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-input
                v-model="userInfo.account"
                placeholder="用户编号"
                suffix-icon="el-icon-s-custom">
              </el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <span class="grid-content bg-purple">
              <el-select slot="prepend" v-model="userInfo.type" placeholder="用户类型">
                <el-option label="学生" value="false"></el-option>
                <el-option label="教职工" value="true"></el-option>
                <el-option label="全部" value=""></el-option>
              </el-select>
            </span>
          </el-col>
          <el-col :span="4">
            <span class="grid-content bg-purple">
             <el-select slot="prepend" v-model="userInfo.state" placeholder="是否锁定">
                  <el-option label="未锁定" value="false"></el-option>
                <el-option label="已锁定" value="true"></el-option>
               <el-option label="全部" value=""></el-option>
              </el-select>
            </span>
          </el-col>
          <el-col :span="2">
            <span class="grid-content bg-purple">
              <el-button type="primary" @click="conditionSearch(userInfo)">搜索</el-button>
            </span>
          </el-col>
          <el-col :span="2">
            <span class="grid-content bg-purple">
              <el-button type="warning" @click="reset">重置</el-button>
            </span>
          </el-col>
          <el-col :span="2">
            <span class="grid-content bg-purple">
              <el-button type="success" @click="addUser(addForm.account,addForm.psw,addForm.phone)">添加管理员</el-button>
            </span>
          </el-col>
        </el-row>
      </form>
      <!--展示区-->
      <el-table :data="userList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="账号" prop="account"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="是否被封禁">
          <template slot-scope="scope">
            <el-switch v-model=" scope.row.state" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="用户类型">
          <template slot-scope="scope">
            {{ scope.row.type ? "教职工" : "学生" }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" round size="mini" @click="edit(scope.row,scope.row.state)">编 辑</el-button>
            <el-button type="danger" round size="mini" @click="confirmRemoveUser(scope.row.account)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页区-->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!--    添加管理员  -->
      <el-dialog title="添加管理员信息" :visible.sync="isAdd" width="30%" :before-close="handleClose">
        <!--内容主题-->
        <el-form :model="addForm" label-width="100px" :rules="addFormRule" ref="addFormRef">
          <el-form-item label="账号" prop="account">
            <el-input v-model="addForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="psw">
            <el-input v-model="addForm.psw" type="password"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="addForm.phone"></el-input>
          </el-form-item>
        </el-form>
        <!--底部-->
        <span slot="footer" class="dialog-footer">
               <el-button @click="handleClose">取 消</el-button>
               <el-button @click="addReset" type="danger">重 置</el-button>
               <el-button type="primary" @click="addAdmin">添 加</el-button>
        </span>
      </el-dialog>
      <!--编辑用户信息-->
      <el-dialog title="编辑用户信息" :visible.sync="isEdit" width="30%" :before-close="handleCloseEdit">
        <!--内容主题-->
        <el-form :model="editForm" label-width="100px" ref="editFormRef">
          <el-form-item label="账号">
            <el-input v-model="editForm.account" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="editForm.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="是否锁定">
            <el-switch
              v-model="editForm.isLock"
              @change="lockChange">
            </el-switch>
          </el-form-item>
          <el-form-item label="封禁原因">
            <el-input
              type="textarea" :rows="2" v-model="editForm.reason">
            </el-input>
          </el-form-item>
        </el-form>
        <!--底部-->
        <span slot="footer" class="dialog-footer">
               <el-button @click="handleCloseEdit">取 消</el-button>
               <el-button type="primary" @click="editUser">保 存</el-button>
        </span>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
export default {
  name: "User",

  /* 这里有个小bug，就是当条件搜索时，用户刷新页面，会导致整个表重新刷新为无条件搜素页面，且停留在上次带有条件搜素的页面 */
  created() {
    const pageNum = parseInt(sessionStorage.getItem("curPage"));
    if (pageNum > 1) {
      this.search(pageNum, this.pageSize, this.userInfo)
      this.pageNum = pageNum;
      return;
    }
    this.search(1, this.pageSize, this.userInfo)
  },
  beforeUpdate() {
    sessionStorage.setItem("curPage", this.pageNum)
  },
  beforeDestroy() {
    sessionStorage.setItem('curPage', '1')
  },
  data() {
    return {
      userInfo: {
        type: null,
        account: "",
        state: null,
      },
      userList: [],
      total: 0,
      pageNum: 1,
      pageSize: 8,
      isEdit: false,
      isAdd: false,
      editForm: {
        name: "",
        account: "",
        reason: "",
        isLock: "",
      },
      addForm: {
        account: '',
        psw: '',
        phone: '',
      },
      addFormRule: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        psw: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: "手机不能为空", trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    addUser(_account,_psw,_phone) {
      this.addForm={},
      this.isAdd=!this.isAdd;
      // this.addAdmin.account =_account,
      //  this.addAdmin.psw =_psw,
      //   this.addAdmin.phone =_phone
    },
    search(pageNum, pageSize, userInfo) {
      this.$http.get("/admin/userSearch", {
        params: {
          queryInfo: userInfo,
          pageNum, pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.userList = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error("数据加载失败")
      })
    },
    reset() {
      this.userInfo.account = "";
      this.userInfo.type = null;
      this.userInfo.state = null;
      this.search(1, this.pageSize, this.userInfo)
    },
    handleCurrentChange() {
      this.search(this.pageNum, this.pageSize, this.userInfo);
    },
    lockChange() {

    },
    edit(info, state) {
      this.isEdit = !this.isEdit
      this.editForm.account = info.account
      this.editForm.name = info.name
      this.editForm.isLock = state
      this.$http.get("/admin/reason", {
        params: {
          account: info.account,
        },
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data.reason);
          this.editForm.reason = res.data.data.reason;
        } else {
          console.log(res.data.msg);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    handleClose() {
      this.addReset();
      this.isAdd = false;
    },
    addReset() {
      this.$refs.addFormRef.resetFields()
    },
    addAdmin() {
     var account=this.addForm.account;
      var psw=this.addForm.psw;
      var phone=this.addForm.phone;
      console.log(account,psw,phone)
      this.$http.get("/admin/addAdmin", {
        params: {
         account: account,
          psw: psw,
          phone: phone,
        }
      }).then(res => {
          this.$message.success(res.data.data.message)
        
      }).catch(err => {
        this.$message.error("数据加载失败")
      })
      this.isAdd = false;
    },
    conditionSearch(userInfo) {
      this.search(1, this.pageSize, userInfo)
      this.pageNum = 1
      this.$message.success("数据查询如下")
    },
    confirmRemoveUser(account) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.removeUser(account)) {
          this.$message.success("删除成功")
        
        } else {
          this.$message.error('删除失败!')
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    
    removeUser(account) {
      var boolen =true;
    this.$http.get("/user/delete", {
        params: {
          account: account,
        },
      }).then(res => {
          boolen = res.data.data.code;
      }).catch(err => {
        this.$message.error("数据加载失败")
      })
      return boolen;
    },
    handleCloseEdit() {
      this.isEdit = !this.isEdit;
      this.editForm.reason = ""
    },
    editUser() {
      if (this.editForm.isLock === false && this.editForm.reason.trim() !== "") {
        this.$message.error("用户未被锁定，不能添加原因");
        return;
      }
      if (this.editForm.isLock === true && this.editForm.reason.trim() === "") {
        this.$message.error("用户被锁定，请添加原因");
        return;
      }
      this.$http.get("/admin/edit", {
        params: {
          account: this.editForm.account,
          reason: this.editForm.reason,
        }
      }).then(res => {
        if (!(res.data.code === 200)) {
          this.$message.error(res.data.msg);
        } else {
          this.search(this.pageNum, this.pageSize, this.userInfo);
          this.editForm.reason = "";
          this.isEdit = !this.isEdit;
          this.$message.success("更新成功");
        }
      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>

<style lang="less" scoped>

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
